<template>
	<el-card class="swiper-container">
		<template #header>
			<div class="header">
				<el-button type="primary" :icon="Plus" @click="handleAdd">增加</el-button>
			</div>
		</template>
		<el-table
			:load="load"
			:data="state.tableData"
      row-key="categoryId"
      border
      lazy
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			style="width: 100%"
      class="custom-table"
		>
<!--      <el-table-column-->
<!--				prop="categoryId"-->
<!--        name="categoryId"-->
<!--        label="id"-->
<!--				width="200">-->
<!--			</el-table-column>-->
			<el-table-column
				prop="categoryName"
				label="分类名称"
				width="250">
			</el-table-column>
			<el-table-column
				label="操作"
				width="200"
			>
				<template #default="scope">
<!--					<el-button type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
					<el-button type="danger" @click="deleteOne(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			background
			layout="prev, pager, next"
			:total="state.total"
			:page-size="state.pageSize"
			:current-page="state.currentPage"
      :page-count="state.pages"
			@current-change="changePage"
		/>
	</el-card>
  <DialogAddCategory ref="addCategory" :type="state.type" :reload="getCarousels" />
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import {ElMessage} from 'element-plus';
import {Plus, Delete} from '@element-plus/icons-vue';
import {categoryList, categoryDelete ,getChildrenDate} from '@/api/drugCategory';

const addCategory = ref();
const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  currentPage: 1,
  pageSize: 10,
  type: 'add', // 操作类型,
  multipleSelection: [], // 选中项
  total: 0, // 总条数
  pages:1
});

onMounted(() => {
  getCarousels();
});
// 获取列表
const getCarousels = () => {
  state.loading = true;
  categoryList({
    pageNumber: state.currentPage,
    pageSize: state.pageSize
  }).then((res) => {
    console.log('当前查询结果为=>', res)
    state.tableData = res.data.data.records;
    state.total = res.data.data.pages;
    state.currentPage = res.data.data.current;
    state.loading = false;
    state.pages = res.data.data.pages;
  });
};
// 添加轮播项
const handleAdd = () => {
  console.log('addCategory', addCategory.value);
  state.type = 'add';
  addCategory.value.open();
};
// 修改轮播图
const handleEdit = (id) => {
  state.type = 'edit';
  addCategory.value.open(id);
};
// 选中之后的change方法，一旦选项有变化，就会触发该方法。
const handleSelectionChange = (val) => {
  state.multipleSelection = val;
};
// 批量删除
const handleDelete = () => {
  if (!state.multipleSelection.length) {
    ElMessage.error('请选择项');
    return;
  }
  // axios.delete('/carousels', {
  //   data: {
  //     ids: state.multipleSelection.map(i => i.carouselId)
  //   }
  // }).then(() => {
  //   ElMessage.success('删除成功');
  //   getCarousels();
  // });
};
const changePage = (val) => {
  state.currentPage = val;
  getCarousels();
};
// 删除单个分类
const deleteOne = async (index, row) => {
  console.log('删除', row)
  await categoryDelete(row.categoryId).then(() => {
    ElMessage.success('删除成功');
    getCarousels();
  }).catch((e) => {
    ElMessage.error('删除失败！' + e.message);
  })
};

const load = async (tree, treeNode, resolve) => {
  console.log('tree', tree)
  console.log('treeNode', treeNode)
  let children = await getChildren(tree.categoryId);
  tree.children = children
  resolve(children)
}

// 获取孩子数据的方法
const getChildren = async (id) => {
  console.log('id', id)
  let children = []
  await getChildrenDate(id).then((res) => {
    console.log('当前查询结果为=>', res.data.data)
    children = res.data.data;
  });
  return children
}

</script>

<style>
.custom-table {
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.custom-table .el-table__row {
  height: 50px;
}

.custom-table .el-table__header th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.custom-table .el-table__body td {
  font-size: 14px;
}

.custom-table .el-button {
  font-size: 12px;
  padding: 5px 10px;
}
</style>
